<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
<title>Single</title>
<!-- for-mobile-apps -->
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Best Store Responsive web template, Bootstrap Web Templates, Flat Web Templates, Android Compatible web template, 
Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
	<div th:include="css :: css"></div>
<!-- //animation-effect -->
</head>
	
<body>
<!-- header -->
<div th:include="/header :: header" ></div>
<!-- //header -->
<!-- breadcrumbs -->
	<div class="breadcrumbs">
		<div class="container">
			<ol class="breadcrumb breadcrumb1 animated wow slideInLeft" data-wow-delay=".5s">
				<li><a href="/index"><span class="glyphicon glyphicon-home" aria-hidden="true"></span>主页</a></li>
				<li class="active">商品详情</li>
			</ol>
		</div>
	</div>
<!-- //breadcrumbs -->
<div id="content">
<!-- single -->
	<div class="single" >
		<div class="container">

			<div class="col-md-12">
				<div class="col-md-5 single-right-left animated wow slideInUp animated" data-wow-delay=".5s" style="visibility: visible; animation-delay: 0.5s; animation-name: slideInUp;">
					<img v-bind:src="goods.prc" data-imagezoom="true" class="img-responsive">
				</div>
				<div class="col-md-7 single-right-left simpleCart_shelfItem animated wow slideInRight" data-wow-delay=".5s">
					<h3>{{goods.name}}</h3>
					<h4>${{goods.price}}</h4>
					<p>销量：{{goods.salesVolume}} &nbsp; &nbsp;库存量：{{goods.stock}}</p>
					<div class="color-quality">
						<div style="width: 100px">
							<h5>数量 :</h5>
							<input type="text"  v-model="num" value="1">
							
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="occasional">
						<h5>标签 :</h5>
						<div class="colr ert">
							<label class="radio"><input type="radio" name="radio" checked=""><i></i>{{goods.category.name}}</label>
						</div>
						<div class="clearfix"> </div>
					</div>
					<div class="occasion-cart">
						<a class="item_add" v-on:click="addcart(goods.id)">添加购物车</a>
					</div>
				</div>
				<div class="clearfix"> </div>
				<div class="bootstrap-tab animated wow slideInUp" data-wow-delay=".5s">
					<div class="bs-example bs-example-tabs" role="tabpanel" data-example-id="togglable-tabs">
						<ul id="myTab" class="nav nav-tabs" role="tablist">
							<li role="presentation" class="active"><a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">简介</a></li>
							<li role="presentation"><a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">评论</a></li>
						</ul>
						<div id="myTabContent" class="tab-content">
							<div role="tabpanel" class="tab-pane fade in active bootstrap-tab-text" id="home" aria-labelledby="home-tab">
								{{goods.detail}}
							</div>
							<div role="tabpanel" class="tab-pane fade bootstrap-tab-text" id="profile" aria-labelledby="profile-tab">
								<div class="bootstrap-tab-text-grids">

									<div class="bootstrap-tab-text-grid" v-for="item in comment">
										<!--<div class="bootstrap-tab-text-grid-left">-->
											<!--<img src="/images/5.png" alt=" " class="img-responsive" />-->
										<!--</div>-->
										<div class="bootstrap-tab-text-grid-right">
											<!--<ul>-->
												<!--<li><a href="#">Admin</a></li>-->
												<!--<li><a href="#"><span class="glyphicon glyphicon-share" aria-hidden="true"></span>Reply</a></li>-->
											<!--</ul>-->
											<p>{{ item.context }}</p>
										</div>
										<div class="clearfix"> </div>
									</div>
									<!--<div class="add-review">-->
										<!--<h4>add a review</h4>-->
										<!--<form>-->
											<!--<input type="text" value="Name" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Name';}" required="">-->
											<!--<input type="email" value="Email" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Email';}" required="">-->
											<!--<input type="text" value="Subject" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Subject';}" required="">-->
											<!--<textarea type="text"  onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'Message...';}" required="">Message...</textarea>-->
											<!--<input type="submit" value="Send" >-->
										<!--</form>-->
									<!--</div>-->
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="clearfix"> </div>
		</div>
	</div>
<!-- //single -->
<!-- single-related-products -->
	<div class="single-related-products">
		<div class="container">
			<h3 class="animated wow slideInUp" data-wow-delay=".5s">推荐商品</h3>
			<p class="est animated wow slideInUp" data-wow-delay=".5s">实时推荐你最喜欢得商品</p>
			<div class="new-collections-grids">
				<div class="row">
					<!--v-if="index<=5"-->
					<div class="col-md-3 " v-for="(item,index)  in goodslist.slice(0, 4)" >
						<div class="new-collections-grid1 animated wow slideInUp" data-wow-delay=".5s">
							<div class="new-collections-grid1-image">
								<a href="javascript:alert('nishishei')" class="product-image"><img src=" /images/8.jpg" alt=" " class="img-responsive" /></a>
								<div class="new-collections-grid1-image-pos">
									<a v-on:click="gotosingle(item.id)" >去看看</a>
								</div>
							</div>
							<h4><a href="single.html">{{item.name}}</a></h4>
							<p>{{item.detail}}</p>
							<div class="new-collections-grid1-left simpleCart_shelfItem">
								<p><span class="item_price">	￥{{item.price}}</span><a class="item_add"  v-on:click="addcart1(goods.id)">添加到购物车 </a></p>
							</div>
						</div>

					</div>

					<div class="clearfix"> </div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!-- //single-related-products -->

</div>
<!-- footer -->
	<div class="footer">
		<div class="container">
			<div class="footer-logo animated wow slideInUp" data-wow-delay=".5s">
				<h2><a href="index.html">易购网<span>你得贴心小窝</span></a></h2>
			</div>
			<div class="copy-right animated wow slideInUp" data-wow-delay=".5s">
				<p>Copyright &copy; 2018</p>
			</div>
		</div>
	</div>
<!-- //footer -->
<!-- zooming-effect -->
	<script src="/js/imagezoom.js"></script>
<!-- //zooming-effect -->
<script>


	var id = localStorage.goodsid;

    var vm = new Vue({
        el: '#content',
        data: {
            goods:{},
            goodslist:[],
            comment:[],
			num:1
        },
        methods: {
            gotosingle: function (id) {
                // 方法内 `this` 指向 vm
                gotosingle(id);
            },
            addcart: function (id) {
                // 方法内 `this` 指向 vm
                addcart(id,vm.num);
            },
			addcart1: function (id) {
                // 方法内 `this` 指向 vm
                addcart(id,1);
            }
        }
    })

	init(id);
	function init(id){
        $.ajax({
            url: '/goods/find/id',
            type: 'GET',
            data:{id:id}
        })
            .done(function(res) {
                console.log(res.obj)
                vm.goods = res.obj
                console.log("success");
            })
            .fail(function() {
                console.log("error");
            })
            .always(function() {
                console.log("complete");
            });
	}


    $.ajax({
        url: '/goods/find/all',
        type: 'GET',
    })
        .done(function(res) {
            console.log(res.obj)
            vm.goodslist = res.obj
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });

    $.ajax({
        url: '/comment/find/comment',
        type: 'GET',
        data: {
            id: id
        }
    })
        .done(function(res) {
            console.log(res.obj)
            vm.comment = res.obj;
            console.log("success");
        })
        .fail(function() {
            console.log("error");
        })
        .always(function() {
            console.log("complete");
        });
</script>
</body>
</html>